<template>
  <div class="home">
    <div class="player" v-if="showPlayer" style="">
      <iframe id="vip-player" :src="playerUrl" allowtransparency="true" scrolling="No" style="width:100%;min-height:600px;"></iframe>
    </div>
    <div class="md-display-2">{{ movie.name }}</div>
    <div class="movie-info">
      <span>{{ movie.year }}</span>
      <span v-for="language in movie.language">{{ language }}</span>
      <span>{{ movie.area }}</span>
    </div>
    <div class="movie-category">
      分类：<span v-for="category in movie.categories.data">{{ category.name }}</span>
    </div>
    <div class="movie-category">
      导演：<span v-for="director in movie.directors.data">{{ director.name }}</span>
    </div>
    <div class="movie-category">
      演员：<span v-for="actor in movie.actors.data">{{ actor.name }}</span>
    </div>
    <div class="movie-category">
      编剧：<span v-for="author in movie.authors.data">{{ author.name }}</span>
    </div>
    <md-card style="margin-top: 15px;margin-bottom: 15px; margin-left: 0;">
      <md-card-header>
        <div class="md-title">简介</div>
      </md-card-header>
      <md-card-content>{{ movie.introduction }}</md-card-content>
    </md-card>
    <md-card style="margin-top: 15px;margin-bottom: 15px; margin-left: 0;">
      <md-card-header>
        <div class="md-title">谁在看</div>
      </md-card-header>
      <md-card-content v-if="watchings.length > 0">
      <md-avatar v-for="user in watchings" style="margin: 8px;">
        <img :src="user.avatar" :alt="user.name">
      </md-avatar>
      </md-card-content>
      <md-card-content v-else>
        还没有人打过卡
      </md-card-content>
    </md-card>
    <md-card style="margin-top: 15px;margin-bottom: 15px; margin-left: 0;">
      <md-card-header>
        <div class="md-title">谁看过</div>
      </md-card-header>
      <md-card-content v-if="watcheds.length > 0">
      <md-avatar v-for="user in watcheds" style="margin: 8px;">
        <img :src="user.avatar" :alt="user.name">
      </md-avatar>
      </md-card-content>
      <md-card-content v-else>
        还没有人看过
      </md-card-content>
    </md-card>
    <md-card style="margin-top: 15px;margin-bottom: 15px; margin-left: 0;">
      <md-card-header>
        <div class="md-title">在哪里看</div>
      </md-card-header>
      <md-card-content v-if="movie.player_sources.data.length > 0">
      <md-content v-for="user in movie.player_sources.data" style="margin: 8px;">
        <a :href="user.url" target="_blank">{{ user.name }}</a> {{ user.content }}
      </md-content>
      </md-card-content>
      <md-card-content v-else>
        暂无可播放通道
      </md-card-content>
    </md-card>
    <md-card style="margin-top: 15px;margin-bottom: 15px; margin-left: 0;">
      <md-card-header>
        <div class="md-title">影评</div><span v-if="!auth"><a href="/auth/login">登录</a>后发表</span>
      </md-card-header>
      <md-card-content v-if="comments.length > 0">
        <md-field v-if="auth">
          <label>发表影评</label>
          <md-textarea v-model="comment_text" md-counter="80"></md-textarea>
        </md-field>
        <md-progress-bar md-mode="indeterminate" v-if="disabled" />
        <md-button @click="submitComment" :disabled="disabled" v-if="auth" class="md-primary md-raised" style="margin:0;">提交</md-button>
        <md-list class="md-triple-line" v-for="comment in comments">
          <md-list-item>
            <md-avatar>
              <img :src="comment.author.avatar" :alt="comment.author.name">
            </md-avatar>

            <div class="md-list-item-text">
              <span>{{ comment.author.name }}</span>
              <span>{{ comment.created_at }}</span>
              <p>{{ comment.content }}</p>
            </div>

            <md-button class="md-icon-button md-list-action">
              <md-icon>thumb_up</md-icon>
            </md-button>
          </md-list-item>

          <md-divider class="md-inset"></md-divider>
        </md-list>
      </md-card-content>
      <md-card-content v-else>
        还没有人评论
      </md-card-content>
    </md-card>
    <md-snackbar class="md-accent" md-position="left" :md-duration="3000" :md-active.sync="showMessage">
      <span>{{ message }}</span>
    </md-snackbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'home',
  computed: {
    // 使用对象展开运算符，将 mapState 对象混入到计算属性之中
    ...mapState([
      // 映射 this.auth 为 store.state.auth
      'auth',
      // 映射 this.user 为 store.state.user
      'user'
    ])
  },
  data: () => ({
    comments: [],
    movie: [],
    watched: [],
    watchings: [],
    comment_text: null,
    message: null,
    showMessage: false,
    disabled: false,
    sending: false,
    showPlayer: false,
    playerUrl: null,
  }),
  methods: {
    async getMovie(id) {
      let url = '/api/movies/' + id + '?include=comments,categories,actors,directors,authors,player_sources,watchings,watcheds'
      let res = this.auth ? await this.$ajax.authRequest({
        url: url
      }) : await this.$ajax.request({
        url: url
      })
      if (res.status === 200) {
        this.movie = res.data
        this.watcheds = res.data.watcheds.data
        this.watchings = res.data.watchings.data
      }
    },
    getComments(id) {
      this.$http.get('/api/movies/comments/' + id + '?include=author').then((response) => {

        this.comments = response.data.data
        console.log()
      }).catch((error) => {


      })
    },
    showMsg(msg) {
      this.message = msg
      this.showMessage = true
    },
    async submitComment() {
      this.disabled = true
      try {
        let res = await this.$ajax.authRequest({
          url: '/api/movies/comments/' + this.id,
          method: 'POST',
          data: {
            content: this.comment_text,
            include: 'author'
          }
        })
        if (res.status === 200 ) {
          this.showMsg('成功发表一条影评')
          this.comment_text = null
          this.comments = [res.data].concat(this.comments)
        }
        this.disabled = false
      } catch(error) {
        this.disabled = false
        this.showMsg(error.response.data.errors ? error.response.data.errors.content[0]: error.response.data.message)
      }
    },
    player(url) {
      this.showPlayer = true
      this.playerUrl = 'http://jx.598110.com/?url=' + url
    }
  },
  async created() {
    this.id = this.$route.params.movieId
    console.log(this.$route)
    await this.getMovie(this.id)
    await this.getComments(this.id)
    // 显示播放
    if (this.movie.player_sources.data.length > 0) {
      this.player(this.movie.player_sources.data[0].url)
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    max-width: 1320px;
    margin: 60px auto 0;
  }
  .md-display-2 {
    width: 100%;
    padding-bottom: 25px;
  }
  .movie-info {
    span {
      background-color: var(--md-theme-default-accent-on-background, #ff5252);
      padding: 8px 16px;
      margin: 4px;
      color: #fff;
      display: inline-block;
    }
  }
  .movie-category {
    span {
      background-color: var(--md-theme-default-primary, #448aff);
      padding: 8px 16px;
      margin: 4px;
      color: #fff;
      display: inline-block;
    }
  }
  .md-progress-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }

</style>

